<template>
	<view class="index pt10 f14 c0">
		<u--form labelPosition="left" :borderBottom="false" labelWidth="auto" :labelStyle="{fontSize:'14px'}"
			:model="withdrawalConfig" ref="uForm">
			<view class="bf p10">
				<u-form-item label="提现方式" prop="balance" ref="item1">
					<view slot="right" class="dfa">
						<u-radio-group v-model="withdrawalConfig.default" :activeColor="subColor" placement="row" icon-color="#000">
							<u-radio :customStyle="{marginRight: '25px'}" label="微信" name="wx" v-if="wiForm.ways && wiForm.ways.includes(1)"></u-radio>
							<u-radio :customStyle="{marginRight: '25px'}" label="支付宝" name="ali" v-if="wiForm.ways && wiForm.ways.includes(2)"></u-radio>
							<u-radio label="银行卡" name="bank" v-if="wiForm.ways && wiForm.ways.includes(3)"></u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
				<block v-if="withdrawalConfig.default=='wx'">
					<u-form-item label="手机号" prop="mobile" ref="item1">
						<view slot="right" class="dfa">
							<u--input v-model="withdrawalConfig.wx.mobile" disabledColor="#ffffff" placeholder="请输入手机号" border="none">
							</u--input>
							<u-icon size="14" color="#999" name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<view class="mb10"></view>
					<u-form-item label="真实姓名" prop="morelnamebile" ref="item1">
						<view slot="right" class="dfa">
							<u--input v-model="withdrawalConfig.wx.realname" disabledColor="#ffffff" placeholder="请输入真实姓名" border="none">
							</u--input>
							<u-icon size="14" color="#999" name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<view class="mb10"></view>
					<u-form-item label="微信OpenId" prop="ID" ref="item1">
						<view slot="right" class="dfa">
							<u--input v-model="withdrawalConfig.wx.userId" disabledColor="#ffffff" placeholder="请输入微信OpenId" border="none">
							</u--input>
							<u-icon size="14" color="#999" name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<view class="mb10"></view>
					<u-form-item label="收款码" prop="ID" ref="item1">
						<view slot="right" class="dfa">
							<u-upload
									:fileList="fileList1"
									@afterRead="afterRead"
									@delete="deletePic"
									uploadIcon="plus"
									name="1"
									:maxCount="1"
								></u-upload>
						</view>
					</u-form-item>
				</block>
				<block v-if="withdrawalConfig.default=='ali'">
					<u-form-item label="手机号" prop="mobile" ref="item1">
						<view slot="right" class="dfa">
							<u--input v-model="withdrawalConfig.ali.mobile" disabledColor="#ffffff" placeholder="请输入手机号" border="none">
							</u--input>
							<u-icon size="14" color="#999" name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<view class="mb10"></view>
					<u-form-item label="真实姓名" prop="morelnamebile" ref="item1">
						<view slot="right" class="dfa">
							<u--input v-model="withdrawalConfig.ali.realname" disabledColor="#ffffff" placeholder="请输入真实姓名" border="none">
							</u--input>
							<u-icon size="14" color="#999" name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<view class="mb10"></view>
					<u-form-item  label="支付宝账号" prop="ID" ref="item1">
						<view slot="right" class="dfa">
							<u--input v-model="withdrawalConfig.ali.userId" disabledColor="#ffffff" placeholder="请输入支付宝账号" border="none">
							</u--input>
							<u-icon size="14" color="#999" name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<view class="mb10"></view>
					<u-form-item label="收款码" prop="ID" ref="item1">
						<view slot="right" class="dfa">
							<u-upload
									:fileList="fileList2"
									@afterRead="afterRead"
									@delete="deletePic"
									uploadIcon="plus"
									name="2"
									:maxCount="1"
								></u-upload>
						</view>
					</u-form-item>
				</block>
				<block v-if="withdrawalConfig.default=='bank'">
					<u-form-item label="手机号" prop="mobile" ref="item1">
						<view slot="right" class="dfa">
							<u--input v-model="withdrawalConfig.bank.mobile" disabledColor="#ffffff" placeholder="请输入手机号" border="none">
							</u--input>
							<u-icon size="14" color="#999" name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<view class="mb10"></view>
					<u-form-item label="真实姓名" prop="morelnamebile" ref="item1">
						<view slot="right" class="dfa">
							<u--input v-model="withdrawalConfig.bank.realname" disabledColor="#ffffff" placeholder="请输入真实姓名" border="none">
							</u--input>
							<u-icon size="14" color="#999" name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<view class="mb10"></view>
					<u-form-item label="所属银行" prop="bank" ref="item1">
						<view slot="right" class="dfa">
							<u--input v-model="withdrawalConfig.bank.bankName" disabledColor="#ffffff" placeholder="请输入所属银行" border="none">
							</u--input>
							<u-icon size="14" color="#999" name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<view class="mb10"></view>
					<u-form-item label="所属支行" prop="ID" ref="item1">
						<view slot="right" class="dfa">
							<u--input v-model="withdrawalConfig.bank.subBankName" disabledColor="#ffffff" placeholder="请输入所属支行" border="none">
							</u--input>
							<u-icon size="14" color="#999" name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<view class="mb10"></view>
					<u-form-item label="银行卡号" prop="ID" ref="item1">
						<view slot="right" class="dfa">
							<u--input v-model="withdrawalConfig.bank.idCard" disabledColor="#ffffff" placeholder="请输入银行卡号" border="none">
							</u--input>
							<u-icon size="14" color="#999" name="arrow-right"></u-icon>
						</view>
					</u-form-item>
				</block>
			</view>
		</u--form>
		<view class="buts bf5">
			<view class="p-0-20 mb10">
				<view class="c0 bs30 tac p10 wei" :style="{background:subColor}" @click="save">保存</view>
			</view>
			<view class="c8 tac pb40 f14" @click="cancel">取消</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import site from '@/custom/siteroot.js';
	import config from '@/custom/config.js';
	import {
		getPage
	} from '@/common/handutil.js'
	export default {
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				withdrawalConfig: {
					default: 'wx',
					bank: {
						idCard: "",
						subBankName: "",
						bankName: "",
						realname: "",
						mobile: "",
					},
					wx: {
						qrCode: "",
						userId: "",
						realname: "",
						mobile: "",
					},
					ali: {
						qrCode: "",
						userId: "",
						realname: "",
						mobile: "",
					}
				},
				wiForm:{
					ways:[],
				},
				fileList1:[],
				fileList2:[],
			}
		},
		onLoad(options) {
			this.form = JSON.parse(options.form)
			this.getSetConfig()
			this.init()
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		methods: {
			init() {
				this.withdrawalConfig = this.form.withdrawalConfig ? this.form.withdrawalConfig : this.withdrawalConfig
				if(this.form && this.form.withdrawalConfig.wx.qrCode){
					this.fileList1 = []
					this.fileList1.push({
						url:this.withdrawalConfig.wx.qrCode
					})
				}
				if(this.form && this.form.withdrawalConfig.ali.qrCode){
					this.fileList2 = []
					this.fileList2.push({
						url:this.withdrawalConfig.ali.qrCode
					})
				}
			},
			async getSetConfig() {
				let {
					data
				} = await this.beg.request({
					url: this.api.config,
					data:{
						ident:'withdrawalSet'
					}
				})
				this.wiForm = data
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			async afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${uni.getStorageSync('siteroot')}/channel/file/upload`,
						filePath: url,
						name: 'file',
						header: {
							contentType: config.contentType,
							appType: 'store',
							uniacid:  uni.getStorageSync('uniacid'),
							storeId: uni.getStorageSync('storeId'),
							Authorization: `Bearer ${uni.getStorageSync('token')}`,
						},
						success: (res) => {
							let r = JSON.parse(res.data)
							if(r && r.code==400){
								uni.showToast({
									title: r.msg || r.code,
									icon: 'none',
									duration: 2000
								})
							}else{
								setTimeout(() => {
										let d = JSON.parse(res.data)
										resolve(d.data)
									}, 500)
							}
						}
					});
				})
			},
			async save() {
				if(this.fileList1.length){
					this.withdrawalConfig.wx.qrCode = ''
					this.fileList1.forEach(v =>{
						this.withdrawalConfig.wx.qrCode = v.url
					})
				}else{
					this.withdrawalConfig.wx.qrCode = ''
				}
				if(this.fileList2.length){
					this.withdrawalConfig.ali.qrCode = ''
					this.fileList2.forEach(v =>{
						this.withdrawalConfig.ali.qrCode = v.url
					})
				}else{
					this.withdrawalConfig.ali.qrCode = ''
				}
				const {
					msg
				} = await this.beg.request({
					url: `${this.api.storeAccount}/${this.storeId}`,
					method: 'put',
					data: {
						withdrawalConfig:this.withdrawalConfig,
					}
				})
				uni.$u.toast(msg)
				getPage().$vm.fetchData()
				setTimeout(() =>{
					uni.navigateBack({
						delta: 1
					})
				},500)
			},
			cancel() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-input__content__field-wrapper__field {
		text-align: right !important;
	}

	/deep/.u-form-item__body {
		align-items: flex-start;
	}

	.buts {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0
	}
</style>